<script setup>
import {computed, reactive} from "vue";
import {useRouter} from "vue-router";

const router = useRouter();

const data = reactive({
  navList: [
    {
      id: 1,
      name: "我的文件",
      path: "/index"
    },
    {
      id: 2,
      name: "我的分享",
      path: "/share"
    },
    {
      id: 3,
      name: "个人中心",
      path: "/userInfo"
    },
  ],
});

let activeNavItemPath = computed(() => {
  return router.currentRoute.value.path;
});

function focusNavItem(item) {
  router.push({
    path: item.path,
  });
}
</script>

<template>
  <div class="nav-container">
    <div v-for="item in data.navList" :key="item.id"
         :class="activeNavItemPath === item.path ? 'single-active-nav-item' : ''" class="single-nav-item"
         @click="focusNavItem(item)">
      {{ item.name }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.nav-container {
  width: 160px;
  height: 100%;
  background-color: white;
  border-right: 1px solid #9f9f9f;
  user-select: none;
  position: absolute;
  top: 0;
  left: 0;

  .single-nav-item {
    float: left;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    cursor: default;

    &:hover {
      background-color: #edf6fb;
    }
  }

  .single-active-nav-item {
    background-color: #e0f2fb;
    color: #06a8fd;
  }
}
</style>